import * as THREE from 'three'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { ParametricGeometry } from 'three/examples/jsm/geometries/ParametricGeometry'
import { ParametricGeometries } from 'three/examples/jsm/geometries/ParametricGeometries'

function createCourse19 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  camera.position.x = 0
  camera.position.y = 0
  camera.position.z = 50
  camera.lookAt(scene.position)
  scene.add(camera)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  const directionLight = new THREE.DirectionalLight(0xffffff)
  directionLight.position.set(-20, -20, -20)
  scene.add(directionLight)

  const ambientLight = new THREE.AmbientLight(0xffffff)
  scene.add(ambientLight)

  const geometry = new ParametricGeometry(ParametricGeometries.klein, 80, 80)
  const material = new THREE.MeshLambertMaterial({ color: 0xff5555 })
  const klein = new THREE.Mesh(geometry, material)
  klein.position.set(30, 0, 0)
  scene.add(klein)

  function cusFun (u: number, v: number, target: THREE.Vector3) {
    // console.log(target);
    const x = 20 * (u - 0.5)
    const z = 20 * (v - 0.5)
    const y = 2 * (Math.sin(x / 2) * Math.cos(z))
    target.set(x, y, z)
  }
  const geometry1 = new ParametricGeometry(cusFun, 14, 14)
  const material1 = new THREE.MeshPhongMaterial({
    specular: 0xaaaaff,
    color: 0x3366ff,
    shininess: 40
  })
  material1.side = THREE.DoubleSide
  const cus = new THREE.Mesh(geometry1, material1)
  scene.add(cus)

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse19
}
